<template>
  <div v-if="userFlag">
    <div class="jd-login" v-if="!loginFlag">
      <div class="login-header">
        <div class="goback-btn" @click="goback">
          <span class="iconfont icon-fanhui"></span>
        </div>
        <div class="login-title">京东登录注册</div>
      </div>
      <div class="login-inp">
        <input
          class="login-user"
          v-model="loginUser"
          placeholder="账号名/邮箱/手机号"
          type="text"
        />
        <input
          class="login-pwd"
          v-model="loginPwd"
          placeholder="请输入密码"
          type="password"
        />
      </div>
      <div class="login-btn">
        <button @click="getLoginNow">登&ensp;录</button>
      </div>
      <div class="register">
        <div class="register-phone">
          <a
            href="https://plogin.m.jd.com/mreg/index?appid=300&returnurl=https%3A%2F%2Fwq.jd.com%2Fpassport%2FLoginRedirect%3Fstate%3D2860240074%26returnurl%3Dhttps%253A%252F%252Fhome.m.jd.com%252FmyJd%252Fnewhome.action%253Fsceneval%253D2%2526jxsid%253D16681554407190043382&source=wq_passport&account="
            >手机号快捷登录</a
          >
        </div>
        <div class="register-now" @click="changeLoginFlag">现在注册</div>
      </div>
    </div>
    <div class="jd-register" v-else>
      <div class="register-header">
        <div class="goback-btn" @click="goback">
          <span class="iconfont icon-fanhui"></span>
        </div>
        <div class="register-title">京东登录注册</div>
      </div>
      <div class="register-inp">
        <input placeholder="账号/邮箱/手机号" type="text" />
        <input placeholder="请输入您的密码" type="password" />
        <input placeholder="请再次确认密码" type="password" />
      </div>
      <div class="register-btn"><button>注&ensp;册</button></div>
      <div class="login">
        <div class="login-phone">手机号快捷登录</div>
        <div class="login-now" @click="changeLoginFlag">已有帐号?</div>
      </div>
    </div>
  </div>
  <div v-else class="balabala">
    您已经登陆成功了<button @click="outUser">退出登录</button>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { loginNow } from "@axios/service";
export default {
  data() {
    return {
      loginUser: "",
      loginPwd: "",
      loginFlag: false,
      userFlag: true,
      lgc: "",
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    changeLoginFlag() {
      this.loginFlag = !this.loginFlag;
    },
    async getLoginNow() {
      let obj = { account: this.loginUser, pwd: this.loginPwd };
      let { data } = await loginNow(obj);
      if (this.loginUser == "") {
        Dialog({ message: "用户名为空,请重新输入" });
        return false;
      }
      if (data.status) {
        Dialog({ message: data.user + "欢迎登录" });
        localStorage.setItem("lgc", JSON.stringify(data.user));
        this.userFlag = false;
        // this.$router.push("/Home");
      } else {
        Dialog({ message: " 账号或密码错误,请重新输入哦" });
        (this.loginUser = ""), (this.loginPwd = "");
      }
    },
    outUser() {
      // 清除状态保持
      window.localStorage.clear();
      // 状态保持清除后刷新页面
      window.location.reload();
      this.userFlag = true;
    },
  },
  mounted() {
    this.lgc = JSON.parse(localStorage.getItem("lgc"));
    if (this.lgc) {
      this.userFlag = false;
    }
  },
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.jd-login {
  .login-header {
    .wh(375,44);
    position: relative;
    .margin(0,0,20,0);
    .goback-btn {
      position: absolute;
      .left(15);
      .top(10);
      .icon-fanhui {
        .fs(20);
        font-weight: bolder;
      }
    }
    .login-title {
      text-align: center;
      .lh(44);
      .fs(17);
    }
  }
  .login-inp {
    .wh(325,120);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    input {
      .wh(325,49);
      .padding(0,0,0,0,);
      .margin(0,0,0,0);
      outline: 0;
      border: 0;
      border-bottom: 1px rgba(128, 128, 128, 0.592) solid;
      .fs(18);
      color: rgba(128, 128, 128, 0.449);
    }
    .login-pwd {
      .margin(20,0,0,0);
    }
  }
  .login-btn {
    .wh(325,50);
    margin: 0 auto;
    .padding(30,0,0,0);
    text-align: center;
    button {
      .wh(325,50);
      background: #ff3a0d;
      border-radius: 20px;
      outline: 0;
      border: 0;
      color: whitesmoke;
      .fs(22);
    }
  }
  .register {
    .wh(325,30);
    .mgau(20);
    display: flex;
    justify-content: space-between;
    color: gray;
    .fs(18);
    .lh(30);
  }
}
.jd-register {
  .register-header {
    .wh(375,44);
    position: relative;
    .goback-btn {
      position: absolute;
      .left(15);
      .top(10);
      .icon-fanhui {
        .fs(20);
        font-weight: bolder;
      }
    }
    .register-title {
      text-align: center;
      .lh(44);
      .fs(17);
    }
  }
  .register-inp {
    .wh(325,160);
    .mgau(20);
    display: flex;
    flex-direction: column;
    input {
      outline: 0;
      .padding(0,0,0,0);
      .margin(10,0,0,0);
      .wh(325,50);
      .fs(16);
      color: rgba(128, 128, 128, 0.385);
      border: 0;
      border-bottom: 1px gray solid;
    }
  }
  .register-btn {
    .wh(325,50);
    margin: 0 auto;
    .padding(30,0,0,0);
    text-align: center;
    button {
      .wh(325,50);
      background: #ff3a0d;
      border-radius: 20px;
      outline: 0;
      border: 0;
      color: whitesmoke;
      .fs(22);
    }
  }
  .login {
    .wh(325,30);
    .mgau(20);
    display: flex;
    justify-content: space-between;
    color: gray;
    .fs(18);
    .lh(30);
  }
}
.balabala {
  .fs(20);
  button {
    .wh(100,40);
    .fs(20);
    .lh(40);
  }
}
</style>
